<template>
  <div id="tablecom" ref="height_page">
    <!-- <el-scrollbar class="form-component__scroll"> -->
    <div ref="height_table" class="form-component__scroll">
      <!-- :default-sort 设置默认排序 height="600" -->
      <el-table
        ref="multipleTable"
        :height="tableHeight"
        :data="typesList"
        tooltip-effect="dark"
        style="width: 100%"
        :default-sort="{prop: 'date', order: 'descending'}"
      >
        <!-- <el-table-column type="" width="55"></el-table-column> -->
        <el-table-column prop="id" label="序号" width="80"></el-table-column>
        <el-table-column prop="title" label="类型名称" width="120"></el-table-column>
        <el-table-column label="类型图标">
          <template slot-scope="scope">
            <!-- {{scope.row.icon}} -->
            <img :src="'./static/img/icon_tel_'+scope.row.icon+'.png'" width="30" height="30" class="head_pic"/>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

import { getTypes } from "../api/api";

export default {
  name: "teltype",
  data() {
    return {
      sessionId: null,
      tableHeight: 555,
      typesList: []
    };
  },

  // { id: 0, name: "交通单位", icon: "./static/img/icon_tel_jt.png" },
  // { id: 1, name: "医疗单位", icon: "./static/img/icon_tel_yy.png" },
  // { id: 2, name: "行政单位", icon: "./static/img/icon_tel_xz.png" },
  // { id: 3, name: "银行金融", icon: "./static/img/icon_tel_yh.png" },
  // { id: 4, name: "本地服务", icon: "./static/img/icon_tel_bd.png" },
  // { id: 5, name: "旅游景点", icon: "./static/img/icon_tel_ly.png" }

  methods: {
    getTableHe() {
      if (this.$refs.height_page!=undefined) {
        var pagetHe = this.$refs.height_page.offsetHeight;
        this.tableHeight = pagetHe;
        // console.log(pagetHe,optionHe,pagingHe);
      }
    }
  },
  mounted() {
    let that = this;
    this.$nextTick(() => {
      // 表格高度
      this.getTableHe();
      setTimeout(() => {
        this.getTableHe();
      }, 1000);
    });
    window.addEventListener("resize", this.getTableHe, false);
  },
  created(){
     getTypes().then(data => {
      // console.log(data)
      let that = this;
      let { msg, code } = data;
      if (code == "200") {
        let dates = data.data;
        console.log(dates)
        this.typesList = dates;

      } else {
        this.$message({
          message: msg,
          type: "error"
        });
      }
    });
  }
};
</script>
